<template>
  <div class="app-container">
    <div class="page">
      <div class="header">
        <div class="word">
          <div class="w1">
            溯源管理系统
          </div>
          <div class="w2">
            在溯源系统中你可以通过产品id查询到种植的溯源信息，实现种植过程的溯源
          </div>
          <div class="w2">
            溯源系统是种植系统中重要的一环,它可以为我们提供溯源的信息，为消费者提供更安心的商品
          </div>
        </div>

        <img class="imgDri" src="../../static/u=715410710,173853787&fm=30&app=106&f=PNG.png" alt="">
      </div>
      <div class="index">
        <div class="search">
          <el-input v-model="input3" placeholder="请输入要查询的产品id" class="searchIuput">
            <el-button slot="append" icon="el-icon-search" style="margin: 0;" @click="searchMes()" />
          </el-input>
        </div>
      </div>
      <div class="f">
        <div>
          <el-button class="e" @click="showone()">
            <div class="t">
              <div class="h">土地选型</div>
            </div> <i class="el-icon-arrow-right el-icon--right" />
          </el-button>
          <div v-show="showa" v-if="farmland!==null">
            <div class="a1">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">负责单位：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ farmland.companyName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">负责员工：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ farmland.employeeName }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">基地土地状态：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ farmland.farmlandStatus }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i1">地块面积（亩）:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ farmland.farmlandArea }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">产权情况：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ farmland.propertyRight }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i1">土地选型时间：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ farmland.finishTime }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-button class="e" @click="showb=!showb">
            <div class="t">
              <div class="h">收割表</div>
            </div> <i class="el-icon-arrow-right el-icon--right" />
          </el-button>
          <div v-show="showb" v-if="harvest!==null">
            <div class="a1">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">记录人员：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ harvest.employeeName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">收割时间：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ harvest.harvestTime }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">收割方式：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ harvest.yieldMethod }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i1">产量（吨）：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ harvest.yield }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-button class="e" @click="showc=!showc">
            <div class="t">
              <div class="h">施肥表</div>
            </div> <i class="el-icon-arrow-right el-icon--right" />
          </el-button>
          <div v-show="showc" v-if="fuse!==null">
            <div class="a1">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">记录人员：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ fuse.employeeName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">肥料名称：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ fuse.fertilizerName }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">施肥时间：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ fuse.useTime }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-button class="e" @click="showd=!showd">
            <div class="t">
              <div class="h">农业防治</div>
            </div> <i class="el-icon-arrow-right el-icon--right" />
          </el-button>
          <template>
            <el-table v-show="showd" v-if="agr!==null" :data="agr" border style="width: 100%">
              <el-table-column prop="employeeName" label="记录人员" width="150%" />
              <el-table-column prop="pesticideName" label="农药名" width="180%" />
              <el-table-column prop="dosage" label="农药用量" width="150%" />
              <el-table-column prop="effect" label="使用效果" width="150%" />
              <el-table-column prop="useReason" label="使用原因" width="200%" />
            </el-table>
          </template>
          <el-button class="e" @click="showe=!showe">
            <div class="t">
              <div class="h">播种</div>
            </div> <i class="el-icon-arrow-right el-icon--right" />
          </el-button>
          <div v-show="showe" v-if="plt!==null">
            <div class="a1">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">记录人员：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ plt.employeeName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">播种方式：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ plt.plantMethod }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">播种时间：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ plt.plantTime }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-button class="e" @click="showf=!showf">
            <div class="t">
              <div class="h">种子种苗选型</div>
            </div> <i class="el-icon-arrow-right el-icon--right" />
          </el-button>
          <div v-show="showf" v-if="seed!==null">
            <div class="a1">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">记录人员：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ seed.employeeName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">种子来源公司：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ seed.companyName }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">是否有机：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ seed.isOrganic==1?'是':'否' }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">是否转基因：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ seed.isTransgenic==1?'是':'否' }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">种植时间：</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ seed.plantTime }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '../../../utils/request'
export default {
  name: 'traceability2',

  data () {
    return {
      id: '',
      showa: false,
      showb: false,
      showc: false,
      showd: false,
      showe: false,
      showf: false,
      showg: false,
      select: '',
      input3: '',
      productId: '',
      processId: '',
      deMes: {},
      materialInspectionId: '',
      materialWarehouseId: '',
      inspectionId: '',
      packageId: '',
      productInspectionId: '',
      productWarehouseId: '',
      traceId: '',
      deId: '',
      openMes: false,
      allProduct: [],
      // allCompany: [],
      allTrace: {},
      inputId: '',
      showa: false,
      showb: false,
      showc: false,
      showd: false,
      showe: false,
      showf: false,
      farmland: {},
      harvest: {},
      fuse: {},
      agr: [],
      plt: {},
      seed: {}
    }
  },

  methods: {
    showone () {
      if (this.openMes) {
        this.showa = !this.showa
        console.log(this.farmland, 'farmland')
        if (this.farmland) {
          this.showa = !this.showa
        } else {
          alert('查不到该土地选型表')
        }
      } else {
        this.$message({
          message: '请先搜索后查看',
          type: 'warning'
        })
      }
    },
    showtwo () {
      if (this.openMes) {
        if (this.harvest) {
          this.showb = !this.showb
        } else {
          alert('查不到该收割表')
        }
      } else {
        this.$message({
          message: '请先搜索后查看',
          type: 'warning'
        })
      }
    },
    showthree () {
      if (this.openMes) {
        if (this.fuse) {
          this.showc = !this.showc
        } else {
          alert('查不到该施肥表')
        }
      } else {
        this.$message({
          message: '请先搜索后查看',
          type: 'warning'
        })
      }
    },
    showfour () {
      if (this.openMes) {
        if (this.agr) {
          this.showd = !this.showd
        } else {
          alert('查不到该农业防治表')
        }
      } else {
        this.$message({
          message: '请先搜索后查看',
          type: 'warning'
        })
      }
    },
    showfine () {
      if (this.openMes) {
        if (this.plt) {
          this.showe = !this.showe
        } else {
          alert('查不到该播种表')
        }
      } else {
        this.$message({
          message: '请先搜索后查看',
          type: 'warning'
        })
      }
    },
    showsix () {
      if (this.openMes) {
        if (this.seed) {
          this.showf = !this.showf
        } else {
          alert('查不到该种子选苗选型')
        }
      } else {
        this.$message({
          message: '请先搜索后查看',
          type: 'warning'
        })
      }
    },
    searchMes () {
      if (this.input3) {
        console.log(this.input3, 'inputId');
        request({
          method: 'get',
          url: 'plant/trace/' + this.input3
        }).then((response) => {
          if (response.statusCode == 20000) {
            this.$message({
              message: '查询成功',
              type: 'success'
            })
            this.allTrace = JSON.parse(JSON.stringify(response.data))
            // console.log(response.data.土地选型, 'getTrace')
            this.farmland = response.data.土地选型
            this.harvest = response.data.收割
            this.fuse = response.data.施肥
            this.agr = response.data.农业防治
            this.plt = response.data.播种
            this.seed = response.data.种子种苗选型
            this.openMes = true
            console.log('this.seed', this.seed)
          } else {
            this.$message({
              message: '查无此信息，查询失败',
              type: 'warning'
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.w1 {
  height: 80px;
  font-size: 25px;
  font-weight: 350;
}

.sel3 {
  width: 100px;
}

.index {
  margin-bottom: 20px;
  width: 95%;
}

.content {
  // width: 100%;
  display: flex;
  justify-content: center;
}

.searchIuput {
  width: 350px;
}

.w2 {
  height: 50px;
  font-size: 15px;
  font-weight: 250;
}

.imgDri {
  height: 300px;
  width: 400px;
}

.header {
  width: 100%;
  height: 350px;
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
  background-color: #ffffff;
}

.search {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.empty {
  width: 600px;
  height: 600px;
}

.page {
  height: 100%;
  width: 100%;
}

.q {
  width: 50%;
  background-color: black;
}

* {
  margin: 0;
  padding: 0;
}

.app-container {
  // background-color: #f3f3f3;
  padding: 20px;
}

.a {
  display: block;
  margin-top: 0px;
  height: 30px;
  background-color: #ffffff;
  border-bottom: 1px solid rgb(135, 206, 250);
  border-left: 1px solid rgb(135, 206, 250);
}

.a1 {
  display: block;
  margin: 0;
  height: 30px;
  // background-color: rgb(225, 242, 227);
  border-bottom: 1px solid rgb(135, 206, 250);
  border-left: 1px solid rgb(135, 206, 250);
}

.b {
  display: inline-block;
  // margin: 0;
  margin-top: -18px;
}

.c {
  display: inline-block;
  width: 200px;
  height: 30px;
  // margin: 0
  margin-top: 17px;
  border-right: 1px solid rgb(135, 206, 250);
}

.d {
  display: inline-block;
  border-right: 1px solid rgb(135, 206, 250);
  // border-left: 1px solid rgb(135, 206, 250);
  width: 215.5px;
  height: 30px;
  // margin: 0;
}

.e {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(225, 242, 227);
  width: 831px;
  margin: 0;
  height: 30px;
  border-top: 1px solid rgb(135, 206, 250);
  border-bottom: 1px solid rgb(135, 206, 250);
  border-right: 1px solid rgb(135, 206, 250);
}

.f {
  width: 100%;
  display: flex;
  justify-content: center;
}

.t {
  width: 800px;
  display: inline-block;
}

.g {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.h {
  margin-left: -700px;
}

.i {
  // width: 60px;
  height: 10px;
  font-size: 13px;
  font-weight: 50;
  padding-left: 5px;
}

.i1 {
  // width: 75px;
  height: 10px;
  font-size: 13px;
  font-weight: 50;
}

.j {
  display: flex;
  height: 26px;
  align-items: center;
  justify-content: flex-end;
  // border: 1px solid black;
}

.k {
  display: flex;
  height: 26px;
  align-items: center;
}
</style>
